<template>
  <!-- 导航菜单容器，router表示开启路由控制，一般都要设置 -->
  <!-- 还可以可控制背景颜色，字体颜色 -->
  <el-menu router background-color="#2A3F54" text-color="#fff"  >
    <h1 class="aside-title">客户关系管理系统</h1>
    <el-row class="aside-user">
      <el-col :span="4">
        <!-- 头像组件，比较简单，size表示大小，src图片地址 -->
        <!-- <el-avatar :size="60" :src="$store.state.userInfo.avatar">
        </el-avatar> -->
      </el-col>
      <!-- 显示用户信息 -->
      <el-col :span="20">
        <h3>欢迎您：{{$store.state.userInfo.username}}</h3>
      </el-col>
    </el-row>
    <!-- el-submenu表示子菜单 -->
    <MyMenuItem v-for="(item,index) in $store.state.menus" :key="index" :item="item"></MyMenuItem>

  </el-menu>

</template>

<script>
import MyMenuItem from './MyMenuItem.vue';
export default {
  name:"LeftMenu",
  components:{MyMenuItem}
}
</script>

<style>
/* 设置菜单所有标题样式文字靠左 */
.el-submenu__title {
  text-align: left;
}
.aside-title {
  color: #fff;
  font-size: 25px;
  width: 220px;
  text-align: center;
}
.aside-user {
  color: #fff;
}
.aside-user h3 {
  margin: 5px;
}
</style>